@use 'sass:color';
@import 'variables';
@import './button.scss';

// 变量定义
$primary-color: #409EFF;
$success-color: #67c23a;
$warning-color: #e6a23c;
$danger-color: #f56c6c;
$info-color: #909399;

$background-color: #1a1b20;
$card-background: #25262b;
$border-color: #2d2e33;
$text-color: #e0e0e0;
$text-color-secondary: #a7a9b2;

// 全局样式
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  @include themed() {
    background-color: t('bg-color');
    color: t('text-color');
  }
}

#app {
  height: 100%;
}

// 滚动条样式
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  @include themed() {
    background: t('bg-color');
  }
}

::-webkit-scrollbar-thumb {
  @include themed() {
    background: t('border-color');
  }
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  @include themed() {
    background: t('text-secondary-color');
  }
}

// Element UI 主题覆盖
.el-card {
  @include themed() {
    background-color: t('card-bg-color');
    border-color: t('border-color');
    color: t('text-color');
  }
}

.el-card__header {
  @include themed() {
    border-bottom-color: t('border-color');
  }
  padding: 15px 20px;
}

.el-table {
  @include themed() {
    background-color: t('card-bg-color');
    color: t('text-color');
  }
  
  th {
    @include themed() {
      background-color: t('bg-color');
      color: t('text-secondary-color');
    }
  }
  
  td {
    @include themed() {
      border-bottom-color: t('border-color');
    }
  }
}

.el-table th {
  background: $background-color;
  color: $text-color;
  border-bottom: 1px solid $border-color;
}

.el-table td {
  border-bottom: 1px solid $border-color;
}

.el-table--striped .el-table__body tr.el-table__row--striped td {
  background: $background-color;
}

.el-table--enable-row-hover .el-table__body tr:hover > td {
  background: $border-color;
}

.el-pagination {
  padding: 20px 0;
  text-align: right;
  
  .el-pagination__total,
  .el-pagination__jump {
    @include themed() {
      color: t('text-color');
    }
  }
  
  .btn-prev,
  .btn-next {
    @include themed() {
      background-color: t('card-bg-color');
      color: t('text-color');
      border-color: t('border-color');
      
      &:disabled {
        background-color: t('bg-color');
        color: t('text-secondary-color');
      }
    }
  }
  
  .el-pager li {
    @include themed() {
      background-color: t('card-bg-color');
      color: t('text-color');
      border-color: t('border-color');
      
      &.active {
        background-color: t('primary-color');
        color: #fff;
      }
    }
  }
}

.el-input {
  .el-input__inner {
    @include themed() {
      background-color: t('bg-color');
      border-color: t('border-color');
      color: t('text-color');
      
      &:focus {
        border-color: t('primary-color');
      }
    }
  }
}

// 所有弹出层的基础样式
.el-popper,
.el-select-dropdown,
.el-picker-panel,
.el-time-panel,
.el-time-range-picker,
.el-date-picker,
.el-date-range-picker,
.el-time-select {
  @include themed() {
    background-color: $card-background !important;
    border-color: $border-color !important;
    color: $text-color !important;
  }
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
  border-radius: 4px;

  .el-scrollbar,
  .el-scrollbar__wrap,
  .el-select-dropdown__wrap,
  .el-select-dropdown__list,
  .el-time-spinner__wrapper,
  .el-time-panel__content,
  .el-time-range-picker__content,
  .el-time-range-picker__cell,
  .el-date-table,
  .el-date-picker__header,
  .el-date-picker__time-header,
  .el-time-panel__footer {
    @include themed() {
      background-color: $card-background !important;
    }
  }

  // 所有列表项通用样式
  .el-select-dropdown__item,
  .el-time-spinner__item,
  .time-select-item,
  .el-date-table td {
    @include themed() {
      color: $text-color !important;
      background-color: $card-background !important;
      
      &:hover {
        background-color: $background-color !important;
      }

      &.selected,
      &.active,
      &.current:not(.disabled) span {
        color: $primary-color !important;
        font-weight: bold;
      }

      &.disabled {
        color: $text-color-secondary !important;
        background-color: transparent !important;
      }
    }
  }
}

// 箭头样式统一处理
.el-popper[x-placement^="bottom"],
.el-popper[x-placement^="top"] {
  @include themed() {
    background-color: $card-background !important;
    border-color: $border-color !important;
  }

  .popper__arrow {
    @include themed() {
      border-color: transparent !important;
      &::after {
        border-color: $card-background !important;
        background-color: $card-background !important;
      }
    }
  }
}

// 日期时间选择器特殊处理
.el-date-picker,
.el-date-range-picker {
  .el-time-panel {
    @include themed() {
      background-color: t('card-bg-color') !important;
    }
  }

  .el-date-picker__time-header,
  .el-date-range-picker__time-header {
    @include themed() {
      background-color: t('card-bg-color') !important;
      border-color: t('border-color') !important;
    }

    .el-input__inner {
      @include themed() {
        background-color: t('bg-color') !important;
        border-color: t('border-color') !important;
        color: t('text-color') !important;
      }
    }
  }

  .el-date-picker__header {
    @include themed() {
      background-color: t('card-bg-color') !important;
    }
  }

  .el-date-table {
    @include themed() {
      background-color: t('card-bg-color') !important;
    }

    th {
      @include themed() {
        background-color: t('card-bg-color') !important;
        color: t('text-secondary-color') !important;
        border-bottom-color: t('border-color') !important;
      }
    }

    td {
      @include themed() {
        color: t('text-color') !important;
        background-color: t('card-bg-color') !important;

        &.next-month,
        &.prev-month {
          color: t('text-secondary-color') !important;
        }

        &.today span {
          color: t('primary-color') !important;
        }

        &.current:not(.disabled) span {
          background-color: t('primary-color') !important;
          color: #fff !important;
        }

        &:hover {
          background-color: t('bg-color') !important;
        }
      }
    }
  }
}

// 时间选择器特殊处理
.el-time-panel,
.el-time-range-picker {
  .el-time-spinner__wrapper {
    @include themed() {
      background-color: t('card-bg-color') !important;
    }
  }

  .el-time-panel__content {
    @include themed() {
      background-color: t('card-bg-color') !important;
      border-color: t('border-color') !important;

      &::after,
      &::before {
        background-color: t('border-color') !important;
      }
    }
  }

  .el-time-panel__footer {
    @include themed() {
      background-color: t('card-bg-color') !important;
      border-top-color: t('border-color') !important;
    }

    .el-time-panel__btn {
      @include themed() {
        color: t('text-color') !important;
        background: transparent !important;
        border: none !important;

        &:hover {
          color: t('primary-color') !important;
        }

        &.confirm {
          color: t('primary-color') !important;
        }
      }
    }
  }
}

// 下拉选择器特殊处理
.el-select-dropdown {
  .el-select-dropdown__list {
    @include themed() {
      background-color: t('card-bg-color') !important;
    }
  }

  .el-select-dropdown__item {
    &.selected {
      @include themed() {
        color: t('primary-color') !important;
        background-color: t('bg-color') !important;
      }
    }
  }
}

.el-dialog {
  @include themed() {
    background-color: t('card-bg-color');
    border-color: t('border-color');
  }
  
  .el-dialog__header {
    @include themed() {
      border-bottom-color: t('border-color');
    }
  }
  
  .el-dialog__title {
    @include themed() {
      color: t('text-color');
    }
  }
  
  .el-dialog__body {
    @include themed() {
      color: t('text-color');
    }
  }
}

.el-dialog__headerbtn .el-dialog__close {
  @include themed() {
    color: t('text-secondary-color');
  }
}

.el-dialog__footer {
  @include themed() {
    border-top-color: t('border-color');
  }
}

.el-message {
  @include themed() {
    background-color: t('card-bg-color');
    border-color: t('border-color');
    color: t('text-color');
  }
  
  &--success {
    @include themed() {
      background-color: rgba(t('success-color'), 0.1);
      border-color: t('success-color');
    }
  }
  
  &--warning {
    @include themed() {
      background-color: rgba(t('warning-color'), 0.1);
      border-color: t('warning-color');
    }
  }
  
  &--error {
    @include themed() {
      background-color: rgba(t('danger-color'), 0.1);
      border-color: t('danger-color');
    }
  }
  
  &--info {
    @include themed() {
      background-color: rgba(t('info-color'), 0.1);
      border-color: t('info-color');
    }
  }
}

.el-button {
  border-radius: 4px;
  font-weight: 500;
  transition: all 0.3s;
}

.el-button--primary {
  background: linear-gradient(135deg, $primary-color 0%, color.adjust($primary-color, $lightness: 10%) 100%);
  border: none;
  box-shadow: 0 2px 6px rgba($primary-color, 0.2);
}

.el-button--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba($primary-color, 0.3);
}

.el-button--success {
  background: linear-gradient(135deg, $success-color 0%, color.adjust($success-color, $lightness:10%) 100%);
  border: none;
  box-shadow: 0 2px 6px rgba($success-color, 0.2);
}

.el-button--success:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba($success-color, 0.3);
}

.el-button--danger {
  background: linear-gradient(135deg, $danger-color 0%, color.adjust($danger-color, $lightness:10%) 100%);
  border: none;
  box-shadow: 0 2px 6px rgba($danger-color, 0.2);
}

.el-button--danger:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba($danger-color, 0.3);
}

// 时间选择器样式
.el-picker-panel {
  @include themed() {
    background-color: t('bg-color');
    border-color: t('border-color');
  }
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  border-radius: 4px;
}

.el-time-panel {
  @include themed() {
    background-color: t('bg-color') !important;
    border-color: t('border-color');
  }

  .el-time-spinner__wrapper {
    @include themed() {
      background-color: t('bg-color');
    }
  }

  .el-time-panel__content {
    @include themed() {
      background-color: t('bg-color');
      border-color: t('border-color');
    }

    &::after,
    &::before {
      @include themed() {
        border-color: t('border-color');
      }
    }
  }

  .el-time-spinner__item {
    @include themed() {
      color: t('text-color');

      &:hover {
        background-color: t('card-bg-color');
      }

      &.active {
        color: t('primary-color');
        font-weight: bold;
      }
    }
  }

  .el-time-panel__footer {
    @include themed() {
      background-color: t('bg-color');
      border-top-color: t('border-color');
    }

    .el-time-panel__btn {
      @include themed() {
        color: t('text-color');
        background-color: transparent;
        border-color: transparent;
        
        &:hover {
          color: t('primary-color');
        }

        &.confirm {
          color: t('primary-color');
          font-weight: bold;
        }
      }
    }
  }
}

// 日期时间选择器样式
.el-date-picker__time-header {
  @include themed() {
    border-bottom-color: t('border-color');
  }

  .el-input__inner {
    @include themed() {
      background-color: t('bg-color') !important;
      border-color: t('border-color');
      color: t('text-color');

      &:focus {
        border-color: t('primary-color');
      }
    }
  }
}

.el-time-spinner__wrapper {
  @include themed() {
    background-color: t('bg-color') !important;

    .el-scrollbar__wrap {
      background-color: t('bg-color');
    }
  }
}

.el-time-spinner__list {
  @include themed() {
    background-color: t('bg-color');
  }
}

.el-time-spinner__item {
  @include themed() {
    color: t('text-color');
    
    &:hover {
      background-color: t('card-bg-color');
    }

    &.active {
      color: t('primary-color');
      font-weight: bold;
    }
  }
}

// 修改时间范围选择器的样式
.el-time-range-picker {
  @include themed() {
    background-color: t('card-bg-color') !important;
    border-color: t('border-color');
  }

  .el-time-range-picker__content {
    @include themed() {
      background-color: t('card-bg-color') !important;
      border-color: t('border-color');
    }
  }

  .el-time-range-picker__cell {
    @include themed() {
      background-color: t('card-bg-color') !important;
      border-color: t('border-color');
    }
  }

  .el-scrollbar__wrap {
    @include themed() {
      background-color: t('card-bg-color') !important;
    }
  }
}

.time-select-item {
  @include themed() {
    color: t('text-color');
    
    &:hover {
      background-color: t('card-bg-color');
    }

    &.selected {
      background-color: t('primary-color');
      color: #fff;
    }

    &.disabled {
      color: t('text-secondary-color');
    }
  }
}

// 时间选择器下拉面板样式
.el-time-select {
  @include themed() {
    background-color: t('card-bg-color') !important;
    border-color: t('border-color');
  }
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  border-radius: 4px;
}

.el-time-select__list {
  @include themed() {
    background-color: t('card-bg-color') !important;
  }
  padding: 0;
}

.el-time-select__item {
  @include themed() {
    color: t('text-color');
    
    &:hover {
      background-color: t('card-bg-color');
    }

    &.selected {
      background-color: t('primary-color');
      color: #fff;
      font-weight: bold;
    }

    &.disabled {
      color: t('text-secondary-color');
      background-color: transparent;
    }
  }
  height: 32px;
  line-height: 32px;
  padding: 0 16px;
  cursor: pointer;
}

// 时间选择器面板样式
.el-picker-panel.time-panel {
  @include themed() {
    background-color: t('bg-color') !important;
    border-color: t('border-color');
  }
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);

  .el-time-panel__content {
    @include themed() {
      background-color: t('bg-color') !important;
    }

    &::after,
    &::before {
      @include themed() {
        border-color: t('border-color');
      }
    }
  }

  .el-time-spinner__wrapper {
    @include themed() {
      background-color: t('bg-color') !important;
    }
  }

  .el-scrollbar__wrap {
    @include themed() {
      background-color: t('bg-color') !important;
    }
  }

  .el-time-spinner__item {
    @include themed() {
      color: t('text-color');
      height: 32px;
      line-height: 32px;

      &:hover {
        background-color: t('card-bg-color');
      }

      &.active {
        color: t('primary-color');
        font-weight: bold;
      }
    }
  }

  .el-time-panel__footer {
    @include themed() {
      background-color: t('bg-color') !important;
      border-top-color: t('border-color');
    }

    .el-time-panel__btn {
      @include themed() {
        color: t('text-color');
        background: transparent;
        border: none;
        
        &:hover {
          color: t('primary-color');
        }

        &.confirm {
          color: t('primary-color');
          font-weight: bold;
        }
      }
    }
  }
}

// 时间范围选择器样式
.el-picker-panel.el-time-range-picker {
  @include themed() {
    background-color: t('bg-color') !important;
    border-color: t('border-color');
  }
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);

  .el-time-range-picker__content {
    @include themed() {
      background-color: t('bg-color') !important;
    }
  }

  .el-time-range-picker__cell {
    @include themed() {
      background-color: t('bg-color') !important;
    }
  }

  .el-scrollbar__wrap {
    @include themed() {
      background-color: t('bg-color') !important;
    }
  }

  .el-time-spinner__item {
    @include themed() {
      color: t('text-color');

      &:hover {
        background-color: t('card-bg-color');
      }

      &.active {
        color: t('primary-color');
        font-weight: bold;
      }
    }
  }
}

// 时间选择下拉面板样式
.el-select-dropdown.time-select {
  @include themed() {
    background-color: t('bg-color') !important;
    border-color: t('border-color');
  }
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);

  .time-select-item {
    @include themed() {
      color: t('text-color');
      height: 32px;
      line-height: 32px;
      padding: 0 16px;

      &:hover {
        background-color: t('card-bg-color');
      }

      &.selected {
        background-color: t('primary-color');
        color: #fff;
        font-weight: bold;
      }

      &.disabled {
        color: t('text-secondary-color');
        background-color: transparent;
      }
    }
  }
}

// 下拉选择器的弹出面板
.el-popper[x-placement^="bottom"] {
  @include themed() {
    background-color: t('bg-color') !important;
    border-color: t('border-color');
  }

  .popper__arrow {
    @include themed() {
      border-bottom-color: t('border-color') !important;
      
      &::after {
        border-bottom-color: t('bg-color') !important;
      }
    }
  }
}

.el-popper[x-placement^="top"] {
  @include themed() {
    background-color: t('bg-color') !important;
    border-color: t('border-color');
  }

  .popper__arrow {
    @include themed() {
      border-top-color: t('border-color') !important;
      
      &::after {
        border-top-color: t('bg-color') !important;
      }
    }
  }
}

// 选择器的下拉列表
.el-scrollbar {
  @include themed() {
    background-color: t('bg-color') !important;
  }

  .el-select-dropdown__wrap {
    @include themed() {
      background-color: t('bg-color') !important;
    }
  }

  .el-select-dropdown__list {
    @include themed() {
      background-color: t('bg-color') !important;
    }
  }
} 